<!--
 * @Author: new-wang
 * @Date: 2025-08-20 14:57:48
 * @LastEditors: new-wang
 * @LastEditTime: 2025-08-20 16:47:16
 * @FilePath: \v3bbs\src\components\login\RegisterIndex.vue
 * @Description: 注册模态框
-->
<template>
  <a-modal v-model:open="registerVisible" @ok="registerVisible = false" :footer="null" :width="'320px'">
    <a-form id="register-form" ref="formRef" :model="formObj" :rules="rules">
      <h1 class="title">
        注册新用户
      </h1>
      <a-form-item name="username" has-feedback>
        <a-input v-model:value="formObj.username" autocomplete="off" :maxlength="userMaxLength"
          :suffix="`${formObj.username.length}/${userMaxLength}`" size="large" placeholder="用户名">
          <template #prefix>
            <UserOutlined style="color: rgba(0,0,0,.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input type="password" autocomplete="off" v-model:value="formObj.password" size="large" placeholder="请输入密码">
          <template #prefix>
            <LockOutlined style="color: rgba(0,0,0,.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="confirmPassword">
        <a-input type="password" autocomplete="off" v-model:value="formObj.confirmPassword" size="large"
          placeholder="请确认密码">
          <template #prefix>
            <LockOutlined style="color: rgba(0,0,0,.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" block @click.prevent="handleSubmit" class="register-form-button" size="large">
          注册
        </a-button>
        Or
        <a @click="login" :style="{ color: themeColor }">
          直接登录
        </a>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from "pinia";
import { useConfigStore } from "@/stores/config"
import type { RegisterData } from '@/types/basic'
import { registerReq } from '@/api/loginService'

const { registerVisible, loginVisible, userMaxLength, themeColor } = storeToRefs(useConfigStore())
const formRef = ref()
const formObj = reactive({
  confirmPassword: "",
  username: "",
  password: ""
})
// 验证确认密码
const validateConfirmPassword = async (rule, value, callback) => {
  if (value !== formObj.password) {
    // callback(new Error(this.$t('common.passwordNotMatch')));
    return Promise.reject('两次输入的密码不一致');
  } else if (value === '') {
    // callback(new Error(this.$t('common.pleaseInputYourPassword')));
    return Promise.reject('请确认密码');
  } else {
    // callback();
    return Promise.resolve();
  }
};
const rules: Record<string, Rule[]> = {
  username: [
    { required: true, message: "请输入您的用户名", trigger: "change" }
  ],
  password: [
    { required: true, message: "请输入您的密码", trigger: "change" }
  ],
  confirmPassword: [
    { validator: validateConfirmPassword, trigger: 'change' }
  ]
}

/**
 * 注册
 */
function login() {
  registerVisible.value = false
  // 显示登录模态框
  loginVisible.value = true
}
/**
 * 提交表单 - 注册 - 表单校验
 */
const handleSubmit = () => {
  formRef.value?.validate().then((res: RegisterData) => {
    console.log("表单校验通过", res)
    registerReq(formObj).then(res => {
      console.log("注册接口调用成功", res)
      // 注册成功后，可以在这里处理注册成功的逻辑，比如提示用户、清空表单等
      // 注册成功后，关闭注册模态框
      registerVisible.value = false
      // 显示登录模态框
      loginVisible.value = true
    }).catch(err => {
      console.log("注册接口调用失败", err)
    })
  }).catch(() => { })
}
</script>

<style scoped lang="less">
#register-form {
  .title {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 15px;
  }

  :deep(.ant-input-suffix) {
    gap: 5px;
  }

  .ant-form-item {
    margin-bottom: 10px;
    line-height: 40px;
  }
}
</style>
